<!-- home -->
<template>
  <div class="index-container">
    <van-swipe :autoplay="3000" class="my-swipe" indicator-color="#000">
      <van-swipe-item v-for="(image, index) in images" :key="index" @click="goToVideoDetail(image.courseId)">
        <div class="msg-box">
          <p class="msg-title">{{image.name}}</p>
          <span class="msg-desc">{{image.desc}}</span>
        </div>
        <img :src="image.url" class="img">
      </van-swipe-item>
    </van-swipe>
    <van-row class="my-row">
      <van-col span="6" v-for="(item, index) in categoryHotList" :key="item.id" style="padding-bottom: 15px;" @click="goCategoryList(item)">
        <div class="item-box">
          <img :src="item.url || 'photo-o'" style="width: 50px;height: 50px;">
          <div class="name">{{item.name}}</div>
        </div>
      </van-col>
    </van-row>
     <div class="wrapper">
      <div class="com-title"><span>热门推荐</span></div>
      <div class="lecture-box">
        <img :src="item.url" class="item-img" v-for="(item, index) in courseHotList" :key="item.id" @click="goToVideoDetail(item.id)">
      </div>
    </div>
     <div class="wrapper">
       <div class="com-title" style="display: flex;justify-content: space-between;">
         <span>精选推荐</span>
         <span style="font-size: 14px;color: gray;" @click="goToCourseDetail"> 更多..> </span>
       </div>
       <van-card
               v-for="(item, index) in list" :key="item.id"
               :centered="isMiddle"
               :price="item.price"
               :tag="item.price === null ? '已购买' : item.price === 0 ? '免费' : '付费'"
               :desc="item.desc"
               :title="item.name"
               :thumb="item.url || 'https://img.yzcdn.cn/vant/ipad.jpeg'"
               style="background-color: white;box-shadow: 0 0 0px gray;padding: 3px 0;border-radius: 5px;"
               @click="goToVideoDetail(item.id)"
       >
         <template #tags>
           <van-tag> </van-tag>
           <van-tag> </van-tag>
         </template>
       </van-card>
    </div>
    <div class="wrapper o">
      <div class="com-title o" style="display: flex;justify-content: space-between;">
        <span>网络直播课</span>
        <span style="font-size: 14px;color: gray;" @click="goToCourseDetail(1)"> 更多..> </span>
      </div>
      <!--<div class="law-box">
        <van-cell icon="star-o" v-for="item in list" :key="item.id" :title="item.name" is-link @click="goDetails(item.id)"/>
      </div>-->

      <van-list
              v-model="loading"
              :finished="finished"
      >
        <div class="item-video-box" @click="goToLiveVideoDetail(item.id)" v-for="(item, index) in liveList" :key="index">
          <div class="img-box">
            <img :src="item.cover">
            <!--<template v-if="!item.isBuy">
              <van-tag color="#ff3535" v-if="item.price">付费</van-tag>
              <van-tag color="#35ff4e" v-else>免费</van-tag>
            </template>
            <template v-else><van-tag color="#35ff4e">已购买</van-tag></template>-->
          </div>
          <div class="info-box">
            <div class="title">{{item.name}}</div>
            <div class="info">{{item.desc}}</div>
            <div class="span-tag">
              <van-tag color="#ff3535">{{item.category.name}}</van-tag>
<!--              <van-tag plain type="primary" color="orange" v-if="item.price == null">{{item.category.name}}</van-tag>-->
            </div>
            <div class="edit-box">{{item.createdAt}}</div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import { banner,articleList,categoryList } from '@/api/home.js'
import { list } from '@/api/course.js'
import api from '@/api'
import dayjs from 'dayjs'

export default {
  data() {
    return {
      images: [],
      hotlist:[],
      lowlist: [],
      list: [],
      liveList: [],
      categoryList:[],
      isBuy: false,
      price: true,
      isMiddle: true,
      loading: false,
      finished: true,
      categoryHotList: [],
      courseHotList: [],
    }
  },

  computed: {},

  mounted() {
    this.handleLogin()
    // this.fetchCategory()
    this.fetchCourseList()
    this.fetchLiveCourseList()
    this.getCategoryHotList()
    this.getCourseHotList()
  },

  methods: {
    async handleLogin() {
      await banner().then((res) => {
        if(res.code == 200){
          this.images = res.data
        }else{
          this.$notify(res.message)
        }
      })
    },
    async fetchCategory(id) {
      await categoryList().then((res) => {
        if(res.code == 200){
          this.categoryList = res.data
        }else{
          this.$notify(res.message)
        }
      })
    },
    async fetchCourseList() {
      await list({pageSize: 5}).then((res) => {
        if(res.code == 200){
          this.list = res.data.rows
        }else{
          this.$notify(res.message)
        }
      })
    },
    async fetchLiveCourseList() {
      await api.liveCourse.list({pageSize: 4}).then((res) => {
        if(res.code == 200){
          res.data.rows.map(item => {
            item.createdAt = dayjs(item.createdAt).format('YYYY-MM-DD HH:mm:ss')
          })
          this.liveList = res.data.rows
        }else{
          this.$notify(res.message)
        }
      })
    },
    goTabList(type){
      this.$router.push({
        path:'/tabList?type='+type
      })
    },
    goDetails(id){
      this.$router.push({
        path:'/richPage?id='+id
      })
    },
    goToCourseDetail(type) {
      this.$router.push('/courseDetails?active=' + type);
    },
    goCategoryList(item){
      this.$router.push({
        path: `/courseDetails?type=${item.id}&categoryName=${item.name}`
      })
    },
    goToVideoDetail(id) {
      this.$router.push('/videoDetails?courseId=' + id);
    },
    goToLiveVideoDetail(id) {
      this.$router.push('/liveVideoDetails?liveCourseId=' + id);
    },
    async getCategoryHotList() {
      const res = await api.category.all({hot: 1});
      this.categoryHotList = res.data;
    },
    async getCourseHotList() {
      const res = await api.course.all({hot: 1});
      this.courseHotList = res.data;
    },
  }
}
</script>
<style lang="scss" scoped>
   .index-container {
     padding-bottom: 1rem;
     .my-swipe{
       background: #fff;
       .van-swipe-item {
         height: 5rem;
         text-align: center;
         .msg-box {
           position: absolute;
           top: 35px;
           left: 35px;
           color: white;
           text-align: left;
           /*z-index: 999;*/
           .msg-title {
             font-size: 18px;
             font-weight: bold;
           }
           .msg-desc {
             font-size: 16px;
             overflow: hidden;
             text-overflow: ellipsis;
             display: -webkit-box;
             -webkit-box-orient: vertical;
             -webkit-line-clamp: 2;
           }
         }
         .img{
           height: 100%;
           width: 100%;
           /*opacity: 0.9;*/
         }
       }
     }
     .my-row{
       text-align: center;
       background: #fff;
       padding:.45rem 0;
       img{
         width: 50%;
         height: auto;
       }
       .name{
         color: #555;
         margin-top: .1389rem;
         font-size: .3333rem;
       }
     }
     .wrapper{
       padding:0 .5rem;
       box-sizing: border-box;
       background: #fff;
       margin-top: .1389rem;
       padding-bottom: .4rem;
       &.o{
         padding:0;
       }
       .com-title{
         font-size: .4167rem;
         color: #333;
         position: relative;
         font-weight: bold;
         padding: 0.4rem 0;
         z-index: 2;
         box-sizing: border-box;
         &.o{
           margin:0 0.5rem;
         }
         span{
           position: relative;
           z-index: 2;
         }
         &::after{
           content: "";
           height: .2rem;
           width: 1.6889rem;
           background: #ff9235;
           border-radius: .1389rem;
           position: absolute;
           left: 0;
           bottom: .4rem;
           opacity: 1;
           z-index: 1;
         }
       }
       .lecture-box{
         width: 100%;
         display: flex;
         overflow-y: auto;
         .item-img{
           height: 2.7778rem;
           width: auto;
           margin-right: .2778rem;
           border-radius: .25rem;
         }
       }
       .topic-box{
         width: 100%;
         box-sizing: border-box;
         .item-box{
           display: flex;
           align-items: center;
           box-sizing: border-box;
           padding: .2778rem .2778rem .2778rem 0;
           border-bottom: .0139rem solid #efefef;
           &:last-child{
             border:none;
           }
           .img-box{
             flex: 0 0 1rem;
             .span-tag {
               position: absolute;
               top: 0;
               left: 0;
             }
           }
           .img{
             width: 1.5rem;
             height: 1.5rem;
             border-radius: .2rem;
           }
           .info-box{
             padding:0 0 0 .2778rem;
             box-sizing: border-box;
             width: calc(100% - 1rem);
             .title{
               font-size: .4167rem;
               text-overflow: ellipsis;
               overflow: hidden;
               white-space: nowrap;
               margin-bottom: .2rem;
               width: 100%;
             }
             .desc{
               font-size: .34rem;
               text-overflow: ellipsis;
               overflow: hidden;
               white-space: nowrap;
               color: #999;
               width: 100%;
             }
           }
         }
       }
     }
     .item-video-box{
       background: #fff;
       border-radius: .2778rem;
       display: flex;
       align-items: center;
       padding:.2778rem;
       box-sizing: border-box;
       width: 94%;
       margin:.2778rem auto 0;
       .img-box{
         flex: 0 0 3rem;
         position: relative;
         img{
           width:100%;
           height: 2.2rem;
           border-radius: .1389rem;
         }
         .van-tag{
           position: absolute;
           top: .1389rem;
           left: .1389rem;
         }
       }
       .info-box{
         flex:1;
         padding: .1389rem .1389rem .1389rem .2778rem;
         box-sizing: border-box;
         height: 2.2rem;
         position: relative;
         overflow: hidden;
         .title{
           width:5.5rem;
           font-size: .4167rem;
           color: #000;
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
         }
         .info{
           font-size: .3333rem;
           color: #999;
           margin-top: .1rem;
           overflow: hidden;
           text-overflow: ellipsis;
           display: -webkit-box;
           /*-webkit-box-orient: vertical;
           -webkit-line-clamp: 2;*/
           white-space: nowrap;
         }
         .edit-box{
           position: absolute;
           left: .2778rem;
           bottom: .1rem;
           font-size: .3333rem;
           color: #999;
           width: 100%;
           .van-icon{
             min-width: 1.7rem;
             color: #666;
             display: inline-block;
             &::before{
               margin-right: .1389rem;
               font-size: .3333rem;
               font-weight: bold;
               color: #ff9235;
             }
           }
         }
       }
     }
   }
</style>
